<template>


<pullRefresh ref="pullresh" :fromData="from" :getDataList="dataAPI"  @getdata="getlist">
          <el-header class="header">
      <Condition   @search="gosearch"></Condition>
      
    </el-header>
    <el-main>
            <!-- <div class="search">
               
      <el-input style="border-radius:50px" v-model="from.name" class="w-50 m-2" placeholder="请输入活动名称">
        <template #prefix>
          <el-icon><ElIcon-Search /></el-icon>
        </template>
      </el-input>
      <div class="search-text" @click="search">
         <span>搜索</span>
      </div>
      </div> -->

              <div class="content">
               <!-- <Condition   @search="gosearch"></Condition> -->

    <div class="content-box">
          <activitCard class="m3" :data ="item" v-for="(item,index) in list" :key="index"></activitCard>
    </div>
      </div>
     </el-main>
</pullRefresh>

</template>

<script>
import activitCard from '../components/activitCard.vue'
import pullRefresh from '../../coms/pullRefresh.vue'
import Condition from '../components/condition.vue'
export default {
   data(){
       return{
          input4:'',
          list:[],
          from:{
          activityName:'',
          endTime:'',
          startTime:''
          },
          dataAPI:this.$API.ActivityMonitoringM.ActivitySup.ActivityExec
       }
   },
components:{
   activitCard,
   pullRefresh,
   Condition
},
methods:{
   search(){
      this.from = {...this.from}
      this.list = []
      this.$refs.pullresh.reset()
   },
   getlist(data){
      this.list =  [...this.list,...data]
   },
   gosearch(data){

      this.from.startTime = data.startTime
      this.from.endTime = data.endTime
      this.from.activityName = data.activityName
      this.search()
    },
}
}
</script>

<style scoped>
/* .top{
   margin-top: 50px;
} */
.el-main{
  padding: 5px !important;
}
.header{
    width: 100%;
    min-height:72px;
    display: flex;
}
.top{
    margin-top: 1.6rem;
}
.el-header{
--el-header-height:none;
}
.content{
   /* width: 100vw; */
   /* height: 100vh; */
   padding: 0 1.6rem;
   background-color: #F7F7F7;
}
.search{
   /* margin-top: 80px; */
    width: 100%;
    height: 6.25rem;
    background-color: var(--el-color-bac);
    padding: 1.6rem;
    display: flex;
}
.search-text{
   width: 5.5rem;
   height: 100%;
   margin-left: 1.6rem;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.4rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color: var(--el-color-primary);
}
.m3{
   margin-top: 1.6rem;
}
/deep/ .el-input{
   /* border-radius:50px !important; */
      width: 12.33rem;
}
.tiem-box{
    padding: 1.6rem 0;
}
.picker-box{
    display: flex;
    align-items: center;
}
.picker-text{
width: 130rem;
font-size: 1rem;
font-family: SourceHanSansSC-Normal-, SourceHanSansSC-Normal;
font-weight: normal;
color: #979797;

}
.picker-text1{
    font-size: 1.6rem;
font-family: SourceHanSansSC-Normal-, SourceHanSansSC-Normal;
font-weight: normal;
color: #979797;
margin:0 0.2rem;
}
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
    width: 12.33rem;
}
</style>